<template>
  <div class="rule-name-editor">
    <n-input
      :value="value"
      @update:value="$emit('update:value', $event)"
      placeholder="请输入规则名称"
      size="large"
      :maxlength="100"
      show-count
    />
  </div>
</template>

<script setup lang="ts">
import { NInput } from 'naive-ui';

defineProps<{
  value: string;
}>();

defineEmits<{
  'update:value': [value: string];
}>();
</script>

<style scoped>
.rule-name-editor {
  width: 100%;
}
</style> 